<!DOCTYPE html>
<html>

<head>
    <title>ScalarField / inFilter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <link rel="stylesheet" href="examples.css" />

    <link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
</head>

<body>
    <h1 class="title mapTitle">ScalarField Filter</h1>
    <div id="map"></div>
    <div id="floating-panel">
        <ul>
            <li>
                <label>Height</label>
                <input id="height" type="range" min="1" max="20" step="1" value="20" class="verticalRange">
                <span id="meters" style="display:block;">slide me!</span>
            </li>
        </ul>
    </div>
    <!-- CDN -->
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//npmcdn.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script src="//npmcdn.com/geotiff@0.3.6/dist/geotiff.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>

    <!-- Plugin -->
    <script src="dist/leaflet.canvaslayer.field.js"></script>

    <script>
        let map = L.map('map');

        /* PNOA Orthophoto */
        var Spain_PNOA_Ortoimagen = L.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma', {
            layers: 'OI.OrthoimageCoverage',
            format: 'image/png',
            transparent: false,
            continuousWorld: true,
            attribution: 'PNOA cedido por © <a href="https://www.ign.es/ign/main/index.do" target="_blank">Instituto Geográfico Nacional de España</a>'
        });
        Spain_PNOA_Ortoimagen.addTo(map).setOpacity(0.6);

        /* DEM data from LIDAR - PNOA */
        d3.request("data/castro_dem.tiff").responseType('arraybuffer').get(
            function (error, tiffData) {
                let dem = L.ScalarField.fromGeoTIFF(tiffData.response);
                let layerDem = L.canvasLayer.scalarField(dem, {
                    color: chroma.scale('Spectral').domain([80, 0])
                }).addTo(map);

                map.fitBounds(layerDem.getBounds());

                /* dynamic filtering */
                let height = document.getElementById('height');
                height.addEventListener('change', function () {                    
                    let h = height.value;
                    let f = function (v) {
                        return v >= 0 && v <= h;
                    };
                    layerDem.setFilter(f);
                    document.getElementById('meters').innerHTML = '< ' + h + ' m'
                });

                /* popup */
                layerDem.on('click', function (e) {
                    if (e.value !== null) {
                        let v = e.value.toFixed(1);
                        let html = (`<span class="popupText">${v} meters</span>`);
                        let popup = L.popup()
                            .setLatLng(e.latlng)
                            .setContent(html)
                            .openOn(map);
                    }
                });
            });

    </script>
</body>

</html>